<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../ele-2.15.7/index.js"></script>

</head>
<body>
<div id="app" style="height: 100%;">
  <el-container>
    <el-header>

      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="书名">
          <el-input  placeholder="书名" v-model="bookname"></el-input>
        </el-form-item>
        <el-form-item label="作者">
            <el-input  placeholder="作者" v-model="bookauthor"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.prevent="query(1)" >查询</el-button>
          <el-button type="primary" @click.prevent="create()" >添加</el-button>
        </el-form-item>
      </el-form>


    </el-header>
    <el-main>
      <el-table :data="tableData.data" style="width: 100%">
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="bookname" label="书名"></el-table-column>
        <el-table-column prop="bookpress" label="出版社"></el-table-column>
        <el-table-column prop="pressdate" label="出版日期">

          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">
              {{ scope.row.pressdate.replace(/(\S+)\s+(\d+)[,\s]+(\d+)/,"$3年$1$2日")}}
            </span>
          </template>

        </el-table-column>
        <el-table-column prop="bookauthor" label="作者"></el-table-column>
        <el-table-column prop="bookcount" label="数量"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope" >
            {{scope.row.status==1?'启用':'禁用'}}
          </template>
        </el-table-column>
        <el-table-column prop="bookimage" label="图片">
          <template slot-scope="scope" >
            <el-image style="width: 80px; height: 100px"
            :src="'../'+scope.row.bookimage"
            fit="contain"></el-image>
          </template>

        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
          <template slot-scope="scope">
            <el-button @click="modify(scope.row)" type="text" size="small">编辑</el-button>
            <template>
              <el-popconfirm
                      confirm-button-text='逻辑删除'
                      cancel-button-text='物理删除'
                      @confirm="remove(scope.row,'逻辑删除')"
                      @cancel="remove(scope.row,'物理删除')">
                <el-button slot="reference" type="text" size="small">删除</el-button>
              </el-popconfirm>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer style="text-align: center">
      <el-pagination :page-size="pageSize" @current-change="query" @size-change="sizeChange"
        background :page-sizes="[2,3,4,5]"
        layout="sizes,prev,pager,next"
        :total="tableData.total"
      :current-page.sync="tableData.page">
      </el-pagination>
    </el-footer>
  </el-container>

  <el-dialog title="图书信息编辑" :visible.sync="dialogFormVisible"  >
    <div style="display: flex;justify-content:space-around" >
    <el-form>
      <el-form-item label="书名" :label-width="formLabelWidth">
        <el-input v-model="editBook.bookname" autocomplete="off" ></el-input>
      </el-form-item>
      <el-form-item label="作者" :label-width="formLabelWidth">
        <el-input v-model="editBook.bookauthor" autocomplete="off" ></el-input>
      </el-form-item>
      <el-form-item label="出版社" :label-width="formLabelWidth">
        <el-input v-model="editBook.bookpress" autocomplete="off" ></el-input>
      </el-form-item>
      <el-form-item label="出版时间" :label-width="formLabelWidth">
        <el-date-picker
                v-model="editBook.pressdate" type="date" placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="书籍状态" :label-width="formLabelWidth">
        <template>
          <el-select v-model="editBook.status" placeholder="请选择">
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </template>

      </el-form-item>
    </el-form>
      <el-upload name="image"
              class="avatar-uploader"
              action="../uploadImageServlet.s"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
        <img v-if="editBook.bookimage" :src="'../'+editBook.bookimage" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveBook">确 定</el-button>
    </div>
    </div>
  </el-dialog>


</div>

<script>
  var v = new Vue({
    el:"#app",
    data:{
      tableData:{page:1},
      bookname:"",
      bookauthor:"",
      pageSize :2,
      editBook:{bookname:"",bookauthor:"",bookpress:"",pressdate:new Date(),bookimage:'',status:''},
      dialogFormVisible:false,
      formLabelWidth:"100px",
      options:[{
        label:'启用',
        value:1
      },{
        label: '禁用',
        value: 0
      }]
    },
    created(){
      this.query(1);
    },
    computed:{
      statu(status){
        return status==0?'禁用':'启用';
      }
    },
    methods:{
      sizeChange(size){
        this.pageSize=size;
        this.query(1);
      },
      query(page){
        axios.get("../QueryServlet.s",{
          params:{
            bookname:this.bookname,
            bookauthor: this.bookauthor,
            currentPage:page,
            pageSize : this.pageSize,
          }
        }).then(res=>{
          this.tableData = res.data
          this.tableData.page = page;
        });
      },
      saveBook(){
        //构造 post参数
        var params = new URLSearchParams();
        if (this.editBook.pressdate instanceof  Date){
          this.editBook.pressdate = this.editBook.pressdate.toLocaleDateString();
          this.editBook.pressdate = this.editBook.pressdate.replace(/\//g,"-");
        }

        for (let name in this.editBook) {
          params.append(name,this.editBook[name]);
        }
        //发送ajax请求
        axios.post("../SaveBookServlet.s",params).then(res=>{
          if (res.data.code==1){
            this.$message(res.data.msg);
            this.query(1);
            this.dialogFormVisible=false;
          }else{
            this.$alert(res.data.msg);
          }
        });

      },
      handleAvatarSuccess(res, file) {

        this.editBook.bookimage =res.data;
        this.$forceUpdate();
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type.indexOf('image/')> -1;
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传图片只能是图片 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      create(){
        this.editBook={bookname:"",bookauthor:"",bookpress:"",pressdate:new Date(),bookimage:"",status:''};
        this.dialogFormVisible = true;
      },
      modify(book){
        //复制book的属性
        for (let name in book) {
          this.editBook[name] = book[name];
        }
        let months = ['一','二','三','四','五','六','七','八','九','十','十一','十二'];
        let m = this.editBook.pressdate.replace(/(\S+)月\s+(\d+)[,\s]+(\d+)/,"$1");

        let i = months.findIndex(month=>{
          return month==m;
        })
        let date = this.editBook.pressdate.replace(/(\S+)月\s+(\d+)[,\s]+(\d+)/,"$3/"+(i+1)+"/$2");
        date = new Date(date);

        this.editBook.pressdate=date;
        this.dialogFormVisible = true;
      },
      remove(book,flag){
        this.$confirm('此操作将'+flag+'此书籍, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         axios.get("../RemoveBookServlet.s",{
           params:{
             id:book.id,
             flag:flag,
           }
         }).then(res=>{
           this.$message({
             type :'success',
             message: '删除成功！'
           });
           this.query(1);
         });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
    }
  });
</script>
</body>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .dialog-footer{
    display: inline-block;
  }
</style>
</html>